<template>
  <div>
    <div v-loading="loading" element-loading-text="模型生成中">
      <!-- 啮合类型-->
      <el-form :label-position="'left'" :inline="false" label-width="120px" >
        <el-form-item label="啮合类型">
          <el-select size="small" v-model="meshType" class="meshType">
            <el-option v-for="item in meshTypeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <!-- 齿数 z1、z2-->
      <el-form :label-position="'left'" :inline="false" class="el-row">
        <el-form-item label="小齿数 z₁" label-width="120px">
          <el-col>
            <el-input size="small" v-model="z1"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="大齿数 z₂" class="el-position" label-width="80px">
          <el-col>
            <el-input size="small" v-model="z2"></el-input>
          </el-col>
        </el-form-item>
      </el-form>

      <!-- 齿宽 b1 与 b2-->
      <el-form :label-position="'left'" :inline="false" class="el-row">
        <el-form-item label="小齿宽 b₁" label-width="120px">
<!--          <el-col>-->
            <el-input size="small" v-model="b1"></el-input>
<!--          </el-col>-->
        </el-form-item>
        <el-form-item label="大齿宽 b₂" class="el-position" label-width="80px">
          <el-col>
            <el-input size="small" v-model="b2"></el-input>
          </el-col>
        </el-form-item>
      </el-form>

      <!-- 齿顶高系数 ha* 与模数 m-->
      <el-form :label-position="'left'" :inline="false" class="el-row">
        <el-form-item label="齿顶高系数 Ha*" label-width="120px">
          <el-select size="small" v-model="haC">
            <el-option v-for="item in haCOptions" :label="item" :value="item" :key="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模数 m" class="el-position" label-width="80px">
          <el-select size="small" v-model="m">
            <el-option v-for="item in modules" :key="item" :label="item" :value="item"
                       :style="modulesPadding(item)"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <!-- 顶隙系数 c* 与压力角 α-->
      <el-form :label-position="'left'" :inline="false" class="el-row">
        <el-form-item label="顶隙系数 c*" label-width="120px">
          <el-select size="small" v-model="cC">
            <el-option v-for="item in cCOptions" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="压力角 α" class="el-position" label-width="80px">
          <el-select size="small" v-model="alpha">
            <el-option v-for="item in alphaOptions" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <!-- 变位系数 x 与齿根圆角 ρ-->
      <el-form :label-position="'left'" :inline="false" class="el-row">
        <el-form-item label="变位系数 x" label-width="120px">
          <el-input disabled size="small" v-model="x"></el-input>
        </el-form-item>
        <el-form-item label="齿根圆角 ρ" class="el-position" label-width="80px">
          <el-select size="small" v-model="rho">
            <el-option v-for="item in rhoOptions" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <!-- 与旋转角 β  todo: 内核扫描切除有缺陷-->
      <el-form :label-position="'left'" :inline="false" label-width="120px">
        <el-form-item label="螺旋角 β">
          <el-select disabled size="small" v-model="beta">
            <el-option v-for="item in betaOptions" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select disabled size="small" v-model="betaType">
            <el-option v-for="item in betaTypeOption" :key="item.type" :label="item.type"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

    </div>

    <div>
      <el-button type="primary" :disabled="loading" @click="createModel1">生成齿轮1</el-button>
      <el-button type="primary" :disabled="loading" @click="createModel2(meshType)">{{ label2 }}</el-button>
    </div>
  </div>
</template>

<script>

import {gearGenerator} from "../../design/GearGenerator";
import {SpurGear} from "../../domain/SpurGear";
import {GearRing} from "../../domain/GearRing";

export default {
  name: "SpurGear",
  data() {
    return {
      loading: false,

      gearType: {label: '生成齿轮2', value: 0},
      gearTypeOption: [
        {label: '生成齿轮2', value: 0},
        {label: '生成齿圈2', value: 1},
      ],

      // 齿数
      z1: 17,
      z2: 23,
      zOptions: [17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42,
        43, 44, 45, 46, 47, 48, 49, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 110, 120, 500],

      // 齿宽
      b1: 30,
      b2: 30,

      // 模数
      m: 2,
      modules: [1, 1.125, 1.25, 1.375, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.5, 4, 4.5, 5, 5.5, 6, 7, 8, 9, 10, 11, 12, 14,
        16, 18, 20, 22, 25, 28, 32, 36, 40, 45, 50,],

      // 压力角
      alpha: 20,
      alphaOptions: [14.5, 17.5, 20, 22.5, 25, 30],

      //齿顶高系数
      haC: 1,
      haCOptions: [0.8, 1, 1.2],

      // 顶隙系数
      cC: 0.25,
      cCOptions: [0.157, 0.2, 0.25, 0.3, 0.35, 0.4],

      // 变为系数 x
      x: 0,

      // 顶隙系数
      rho: 0.38,
      rhoOptions: [0.25, 0.3, 0.38, 0.39],

      // 旋转角
      beta: 0,
      betaOptions: [0, 6, 8, 10, 12, 15, 20, 25, 30, 35, 40],

      //螺旋方向
      betaType: 1,
      betaTypeOption: [
        {type: "左旋", value: 0},
        {type: "右旋", value: 1}
      ],

      //啮合类型
      meshType: 0,
      meshTypeOption: [
        {label: '外啮合', value: 0},
        {label: '内啮合', value: 1},
        // {label: '齿轮齿条', value: 2},
      ],

      label2: '生成齿轮2',
    };
  },
  mounted() {
    gearGenerator.init();
  },
  methods: {
    createModel1() {
      this.loading = true;
      const spurGear1 = new SpurGear(this.z1, this.m, (this.alpha / 180) * Math.PI, this.b1, this.rho, this.haC, this.cC, this.beta, this.x);
      gearGenerator.createSpurGear(spurGear1, () => {
        this.loading = false;
      });
    },

    createModel2(type) {
      this.loading = true;
      if (type === 0) {
        const spurGear2 = new SpurGear(this.z2, this.m, (this.alpha / 180) * Math.PI, this.b2, this.rho, this.haC, this.cC, this.beta, this.x);
        gearGenerator.createSpurGear(spurGear2, () => {
          this.loading = false;
        });
      } else if (type === 1) {
        const gearRing = new GearRing(this.z2, this.m, (this.alpha / 180) * Math.PI, this.b2, this.rho, this.haC, this.cC, this.beta, this.x);
        gearGenerator.createGearRing(gearRing, () => {
          this.loading = false;
        });
      } else {
        // todo
      }
    },

    modulesPadding(value) {
      const leftPadding = [1, 1.25, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 16, 20, 25, 32, 40, 50].includes(value) ? 1 : 15;
      return 'padding-top: 1px; padding-bottom: 1px; padding-left: ' + leftPadding + 'px';
    },

    selectGearType(type) {
      this.gearType = this.gearTypeOption[type];
    },

  },
  watch: {
    'x'() {
      if (-1 > this.x) {
        this.x = -1;
      } else if (1 < this.x) {
        this.x = 1;
      }
    },
    'meshType'() {
      switch (this.meshType) {
        case 0:
          this.label2 = '生成齿轮2';
          break;
        case 1:
          this.label2 = '生成齿圈2';
          break;
        default:
          this.label2 = '生成齿条2';
          break;
      }
    }
  }
};
</script>

<style scoped>

.el-row {
    display: flex;
}

>>> .el-input {
    width: 100px;
}

.meshType >>> .el-input{
    width: 330px;
}

.el-position {
    padding-left: 50px;
}
</style>